<template>
	<view class="content">
		<login-notice-view v-if="showLogin" />
		<block v-else>
			<empty-view v-if="items.length == 0" />
			<view class="notification_post_cell_content app_content_color" v-for="(item,index) in items" :key="index" :data-item="item"
				@tap="cellTap">
				<image class="notification_post_cell_avatar app_background_color" mode="aspectFill" :src="item.icon" @tap="avatarTap"
					:data-item="item"></image>
				<view class="notification_post_cell_info_content">
					<view class="notification_post_cell_info_title app_title_color" v-if="item.reply_content.length > 0">
						{{item.reply_content}}</view>
					<view class="notification_post_cell_info_title app_title_color" v-else-if="item.content.length > 0">{{item.content}}
					</view>
					<view class="notification_post_cell_info_summary app_background_color app_subtitle_color" v-if="item.topic_content.length > 0">
						{{item.topic_content}}</view>
					<view class="notification_post_cell_info_summary app_background_color app_subtitle_color" v-else-if="item.topic_subject.length > 0">
						{{item.topic_subject}}</view>
					<view class="notification_post_cell_info_board_content">
						<view class="notification_post_cell_info_board_cell_content">
							<view>{{item.user_name}}</view>
						</view>
						<view class="notification_post_cell_info_board_cell_content">
							<view>{{item.board_name}}</view>
						</view>
					</view>
					<view class="notification_post_cell_info_time_text app_subtitle_color">{{item.showTime}}</view>
				</view>
			</view>

		</block>
	</view>
</template>

<style lang="scss">
	.content {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.notification_post_cell_content {
		display: flex;
		margin-top: 1upx;
		width: 100%;
		flex-direction: row;
	}

	.notification_post_cell_avatar {
		width: 80upx;
		height: 80upx;
		min-width: 80upx;
		max-width: 80upx;
		border-radius: 40upx;
		margin-top: 30upx;
		margin-left: 30upx;
	}

	.notification_post_cell_info_content {
		display: flex;
		margin-left: 20upx;
		flex-direction: column;
		flex-grow: 1;
		margin-top: 30upx;
		margin-bottom: 30upx;
		margin-right: 30upx;
	}

	.notification_post_cell_info_title {
		font-size: 30upx;
		word-wrap: break-word;
		max-width: 600upx;
	}

	.notification_post_cell_info_summary {
		font-size: 25upx;
		margin-top: 10upx;
		padding: 20upx;
		border-radius: 8upx;
	}

	.notification_post_cell_info_board_content {
		display: flex;
		flex-direction: row;
		margin-top: 20upx;
	}

	.notification_post_cell_info_board_cell_content {
		display: flex;
		background-color: $uni-global-green-color;
		border-radius: 4upx;
		height: 30upx;
		padding-left: 10upx;
		padding-right: 10upx;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 20upx;
		margin-right: 10upx;
	}

	.notification_post_cell_info_time_text {
		font-size: 20upx;
		margin-right: 40upx;
		margin-top: 20upx;
	}
</style>

<script>
	import http from "../../utils/http.js"
	import util from "../../utils/util.js"
	export default {
		data() {
			return {
				items: [],
				page: 1,
				showLogin: true
			}
		},
		onLoad() {
			this.loadData()
		},
		onPullDownRefresh() {
			this.loadData()
		},
		onReachBottom() {
			this.loadMoreData();
		},
		onShow() {
			let showLogin = getApp().globalData.user == null
			if (this.showLogin != showLogin) {
				this.showLogin = showLogin
				if (!showLogin) {
					this.loadData()
				}
			}
		},
		methods: {
			loadData() {
				var that = this;
				http.request("message/notifylistex", {
					type: "post",
					page: 1,
					pageSize: 20
				}, {
					success: function(data) {
						uni.stopPullDownRefresh();
						that.items = data.body.data.map(function(item) {
							item.showTime = util.dateStringFromTimestamp(item.replied_date);
							return item;
						})
						that.page = 2;
						uni.removeTabBarBadge({
							index: 2
						})
					},
					fail: function(msg) {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: msg,
							icon: "none"
						})
					}
				})
			},
			loadMoreData() {
				var that = this;
				http.request("message/notifylistex", {
					type: "post",
					page: this.page,
					pageSize: 20
				}, {
					success: function(data) {
						var items = that.items.concat(data.body.data.map(function(item) {
							item.showTime = util.dateStringFromTimestamp(item.replied_date);
							return item;
						}))
						that.items = items;
						that.page++;
					},
					fail: function(msg) {
						uni.showToast({
							title: msg,
							icon: "none"
						})
					}
				})
			},
			cellTap(e) {
				var item = e.currentTarget.dataset.item;
				uni.navigateTo({
					url: "../forum-post-detail/forum-post-detail?topicId=" + item.topic_id
				})
			},
			avatarTap(e) {
				var item = e.currentTarget.dataset.item;
				uni.navigateTo({
					url: "/pages/other-user/other-user?uid=" + item.user_id
				})
			}
		}
	}
</script>
